<template>
	<view>
		<view class="" style="display: flex;justify-content: space-between;padding: 110rpx 69rpx 20rpx 20rpx">
			<view class="">
				<!-- <image  :src="getImgUrl('/img/missimg/xiangzuojiantou.svg')" style="width: 56rpx;height: 30rpx;" @tap="Returns"></image> -->
				<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" @click="Returns"></uni-icons>
			</view>
			<view class="top_right">我的思念灯</view>
			<view style="width: 100rpx;"></view>
		</view>
		<scroll-view style="height:59vh;padding-bottom: 182rpx;" scroll-y="true">
			<view class="centerInfo">
				<view v-for="(item,index) in data" :key="index" class="box">
					<view class="box_left" v-for="(items,index) in lampList">
						<image :src="items.icon" mode="" class="imgs" v-if='item.dictItem == items.dictItem'></image>
					</view>
					<view class="box_right">
						<view class="box_title">
							<text
								class="title">{{item.content.length < 20 ? item.content : item.content.slice(0,20) +'....'}}</text>
							<text class="del" @click="del(item.id,index)">删除</text>
						</view>
						<view class="box_time">{{item.creationTime}}</view>
						<view class="box_ft">
							<view>
								<image :src="getImgUrl('/img/missimg/chakan.svg')" class="imginfo"></image>
								<text class="num">{{item.hisNumber}}</text>
							</view>
							<view class="">
								<image :src="getImgUrl('/img/missimg/dianzan.png')" class="imginfo"></image>
								<text class="num">{{item.likeNumber}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="barrage">
			<view class="footer">
				<view class="btn" @click="misspass3">
					再放一个
				</view>
			</view>
		</view>
		<view class="modal" v-if="modals">
			<view class="titles">
				确认放置思念灯吗
			</view>
			<view class="content">
				提交后不可再更改哦～是否确认？
			</view>
			<view style="display: flex;justify-content: space-around;margin-top: 35px;">
				<view class="black" @click="Black">
					返回编辑
				</view>
				<view class="ok" @click="Ok">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		busTreviRiverlist,
		busTreviRiverldelete
	} from '../../../../utils/api.js'
	import {
		imgBaseUrl
	} from '../../../../utils/baseUrl'
	export default {
		data() {
			return {
				modals: false,
				data: [],
				lampList: [{
					dictItem: '0',
					text: "荷花灯",
					icon: imgBaseUrl + "/img/missimg/denglong1.png"
				}, {
					dictItem: '1',
					text: "荷花灯",
					icon: imgBaseUrl + "/img/missimg/denglong2.png"
				}, {
					dictItem: '2',
					text: "荷花灯",
					icon: imgBaseUrl + "/img/missimg/denglong3.png"
				}],
				id: '',
				index: '',
			};
		},
		async mounted() {
			const list = await busTreviRiverlist()
			console.log(list.result,'result');
			if(list.result.length == 0)
			{
				uni.showToast({
					title: '暂无数据',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'error',
					//显示持续时间为 2秒
					duration: 1000
				})
			}else{
				this.data = list.result
			}
		},
		methods: {
			//再放一个
			misspass3() {
				this.$emit('misspass3')
			},
			del(id, index) {
				console.log(id, 'this')
				this.id = id
				this.index = index
				this.modals = true
			},
			Black() {
				this.modals = false
			},
			async Ok() {
				const result = await busTreviRiverldelete(this.id)
				this.data.splice(this.index, 1)
				uni.showToast({
					title: '删除成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 1000
				})
				this.$emit('ok')
				this.modals = false
			},
			Returns() {
				this.$emit('returns')
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
		}
	}
</script>

<style lang="less" scoped>
	.top_right {
		padding-left: 98rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 200;
		text-align: center;
	}

	.centerInfo {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.box {
			width: 686rpx;
			height: 192rpx;
			margin-bottom: 20rpx;
			background: linear-gradient(225deg, #FED5B7 0%, #FFE0BF 50%, #FFE4B4 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			display: flex;
			// justify-content: space-between;

			.box_left {
				// width: 160rpx;
				// height: 160rpx;
				padding-right: 8rpx;

				// border: 1px solid red;
				.imgs {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.box_right {
				width: 480rpx;
				height: 160rpx;

				// border: 1px solid red;
				.box_title {
					display: flex;
					justify-content: space-between;
					padding-right: 20rpx;
					margin-top: 24rpx;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #6A3C16;
					}

					.del {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						color: #000000;
					}
				}

				.box_time {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #000000;
					margin-top: 10rpx;
				}

				.box_ft {
					width: 300rpx;
					margin-top: 20rpx;
					margin-left: 200rpx;
					display: flex;
					justify-content: space-evenly;

					.imginfo {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
					}

					.num {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #6A3C16;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.barrage {
		width: 100%;
		// height: 800rpx;
		// border: 1px solid red;
		position: relative;
	}

	.footer {
		// position: absolute;
		// bottom: -15rpx;
		// left: 30%;
		// z-index: 10000;
		display: flex;
		justify-content: center;

		.btn {
			text-align: center;
			width: 356rpx;
			height: 100rpx;
			color: #60371A;
			font-family: PingFang SC-Bold, PingFang SC;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			opacity: 1;
		}
	}

	.modal {
		position: absolute;
		top: 50%;
		left: 7%;
		width: 640rpx;
		height: 360rpx;
		background: #000000;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 0.8;
		border: 2rpx solid #F1F1F1 !important;
		border-image: linear-gradient(90deg, rgba(252, 232, 202, 1), rgba(0, 0, 0, 1), rgba(252, 232, 202, 1)) 1 1;
		z-index: 10000;

		.titles {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 100rpx;
		}

		.content {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.black {
			text-align: center;
			color: #FFFFFF;
			width: 230rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			border: 1px solid #FFFFFF;

		}

		.ok {
			text-align: center;
			width: 222rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
		}
	}
</style>